﻿<div class='dock-container' style='width: 100%; height: 100%'>
    <div class='dock-container' dock='top' style='position: none; display: block; left: 20px;
        top: 50px; width: 400px; height: 400px; background-color: gray'>
        <div dock='left' style='border: 1px solid black; width: 200px; display: block'>
            left abc def
        </div>
        <div dock='right' style='border: 1px solid black'>
            right
        </div>
        <div dock='top' style='border: 1px solid black'>
            top
        </div>
        <div dock='bottom' style='border: 1px solid black'>
            bottom
        </div>
        <div dock='bottom' style='border: 1px solid black'>
            On top
        </div>
        <div dock='fill' style='border: 1px solid black; background-color: blue'>
            fill
        </div>
    </div>
    <div dock='left'>
        Here I'm</div>
    <div dock='right'>
        Over here</div>
    <div dock='bottom'>
        Me down here</div>
    <div dock='fill'>
        rest</div>
</div>
